<template>
  <button 
    class="custom-button" 
    :class="[
      type ? `custom-button--${type}` : '',
      size ? `custom-button--${size}` : '',
      { 'custom-button--plain': plain, 'custom-button--disabled': disabled }
    ]"
    :disabled="disabled"
    @click="handleClick"
  >
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'primary',
    validator: (value: string) => ['primary', 'success', 'warning', 'danger', 'info'].includes(value)
  },
  size: {
    type: String,
    default: 'normal',
    validator: (value: string) => ['small', 'normal', 'large'].includes(value)
  },
  plain: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

const handleClick = (event: Event) => {
  if (!props.disabled) {
    emit('click', event)
  }
}
</script>

<style>
.custom-button {
  padding: 0 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  outline: none;
}

/* 类型样式 */
.custom-button--primary {
  background-color: #07c160;
  color: #ffffff;
}

.custom-button--success {
  background-color: #4cd964;
  color: #ffffff;
}

.custom-button--warning {
  background-color: #f0ad4e;
  color: #ffffff;
}

.custom-button--danger {
  background-color: #dd524d;
  color: #ffffff;
}

.custom-button--info {
  background-color: #909399;
  color: #ffffff;
}

/* 尺寸样式 */
.custom-button--small {
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  padding: 0 20rpx;
}

.custom-button--large {
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  padding: 0 40rpx;
}

/* 朴素样式 */
.custom-button--plain {
  background-color: transparent;
  border: 1rpx solid currentColor;
}

.custom-button--plain.custom-button--primary {
  color: #07c160;
}

.custom-button--plain.custom-button--success {
  color: #4cd964;
}

.custom-button--plain.custom-button--warning {
  color: #f0ad4e;
}

.custom-button--plain.custom-button--danger {
  color: #dd524d;
}

.custom-button--plain.custom-button--info {
  color: #909399;
}

/* 禁用样式 */
.custom-button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style> 